<template>
  <div class="pd-45">
    <a-form :model="LoginForm" :rules="rules" ref="formRef" >
      <a-form-item label="账号" name="username">
        <a-input v-model:value="LoginForm.username" placeholder="输入账号" />
      </a-form-item>
      <a-form-item label="密码" name="password">
        <a-input-password
          v-model:value="LoginForm.password"
          show-password
          placeholder="输入密码"
        />
      </a-form-item>
      <!-- <p class="forgetPassword"><span>忘记密码？</span></p> -->
      <a-form-item>
        <a-button style="width: 100%" type="primary" @click="onLogin">
          立即登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts">
import { ValidateErrorEntity } from 'ant-design-vue/lib/form/interface'
import { defineComponent, reactive, ref, UnwrapRef } from 'vue'
import { useStore } from 'vuex'
// import localCache from '@/utils/cache'
import { FormState } from '../type'
export default defineComponent({
  setup () {
    const store = useStore()

    const formRef = ref()
    const rules = {
      username: [{ required: true, message: '请输入账号' }],
      password: [{ required: true, message: '请输入密码' }]
    }
    //  localCache.getCache('remeber')?.username
    const loginObj = {
      username: '',
      password: ''
    }
    const LoginForm: UnwrapRef<FormState> = reactive(loginObj)
    const onLogin = () => {
      formRef.value
        .validate()
        .then(() => {
          store.dispatch('authModule/AUTO_ACTION', LoginForm)
        })
        .catch((error: ValidateErrorEntity<FormState>) => {
          console.log('error', error)
        })
    //   formRef.value?.validate((valid) => {
    //     if (valid) {
    //       // 记住密码
    //       localCache.setCache('remeber', {
    //         username: LoginForm.username,
    //         password: LoginForm.password
    //       })
    //       // 登陆验证
    //       store.dispatch('authModule/AUTO_ACTION', { ...LoginForm })
    //     }
    //   })
    }

    return {
      formRef,
      rules,
      LoginForm,
      onLogin
    }
  }
})
</script>
<style lang="less" scoped>
.forgetPassword {
  text-align: right;
  color: #409eff;
  font-size: 12px;
  cursor: pointer;
}
.forgetPassword > span:hover {
  color: aqua;
}

</style>
